<template>
  <div>
    <div class="flex-a flex-b cart-head">
      <nut-checkbox v-model="state.selectAll" label="全选" @click="selectAll">全选</nut-checkbox>
      <span @click="changeState">{{ state.edit == true ? '编辑' : '完成' }}</span>
    </div>
    <div class="cart-list">
      <div class="cart-item flex-a" v-for="item in state.cartList" :key="item.id">
        <nut-checkbox v-model="item.select" @change="select()"></nut-checkbox>
        <nut-card :img-url="item.goodsCoverImg" :title="item.goodsName" :price="item.sellingPrice + ''"
          :shopDesc="item.specName + ''">
          <template #footer>
            <div class="customize">
              <nut-input-number v-model="item.goodsCount" :min="1" @change="addCartList(item)" />
            </div>
          </template>
        </nut-card>
      </div>
    </div>
    <div class="cart-foot flex-a flex-b">
      <div class="foot-left">
        合计：{{ state.edit == true ? '￥' + state.totalPrice : state.totalNum + '件' }}
      </div>
      <div class="foot-right">
        <nut-button type="info" @click="jumpTo">{{ state.edit == true ? '结算' : '删除' }}</nut-button>
      </div>
    </div>
    <nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" />
  </div>
</template>
  
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, onMounted } from 'vue';
import { getCart, uploadCart, delCart } from '../../../api/index'
export default {
  setup() {
    const state = reactive({
      selectAll: false,
      cartList: [],
      edit: true,
      msg: '',
      show: false,
      type: '',
      totalPrice: 0 as any,
      totalNum: 0
    });
    const selectAll = () => {
      state.cartList.forEach(element => {
        element.select = state.selectAll
      });
      addPrice()
      addNum()
    }
    const select = () => {
      let n = state.cartList.findIndex(ele => {
        return ele.select == false
      })
      n == -1 ? state.selectAll = true : state.selectAll = false
      addPrice()
      addNum()
    }
    const addPrice = () => {
      let total = 0
      state.cartList.forEach(item => {
        if (item.select == true) {
          total += parseInt(item.sellingPrice) * parseInt(item.goodsCount)
        }
      })
      state.totalPrice = total.toFixed(2)
    }
    const addNum = () => {
      let n = 0
      state.cartList.forEach(item => {
        if (item.select == true) {
          n += 1
        }
      })
      state.totalNum = n
    }
    const jumpTo = () => {
      let i = state.cartList.findIndex(item => { return item.select == true })
      let list = state.cartList.filter(item => { return item.select == true })
      let cartItemIds = ''
      list.forEach(item => {
        cartItemIds += item.cartItemId + ','
      })
      if (state.edit == true && i != -1) {
        Taro.redirectTo({ url: '/packageA/pages/confirmOrder/index?cartItemIds=' + cartItemIds })
      } else if (state.edit == false) {
        let ids = ''
        state.cartList.forEach(item => {
          if (item.select == true) {
            ids += item.cartItemId + ','
          }
        })
        delCart(ids).then(res => {
          if (res.resultCode == 200) {
            openToast('success', '删除成功')
          } else {
            openToast('fail', res.message)
          }
          getCartList()
        })
      }
    }
    onMounted(() => {
      getCartList()
    });
    const getCartList = () => {
      getCart().then(res => {
        if (res.resultCode == 200) {
          let list = res.data.list
          list.forEach(item => {
            item.select = false
          });
          state.cartList = list
          addPrice()
        }
      })
    }
    const addCartList = (item) => {
      uploadCart({ goodsCount: parseInt(item.goodsCount), goodsId: item.goodsId, cartItemId: item.cartItemId }).then(res => {
        if (res.resultCode == 500) {
          openToast('warn', res.message)
        }
        getCartList()
      })
    }
    const openToast = (type: string, msg: string,) => {
      state.show = true;
      state.msg = msg;
      state.type = type;
    }
    const changeState = () => {
      state.edit = !state.edit
      state.cartList.forEach(element => {
        element.select = false
      });
      state.selectAll = false
    }
    return { state, selectAll, select, jumpTo, getCartList, addCartList, openToast, changeState, addPrice, addNum };
  }
};
</script>
<style lang="scss" >
.cart-head {
  padding: 20px;
  border-bottom: 1px solid #EEEEEE;

  .nut-checkbox__label {
    margin-left: 10px;
  }
}

.cart-list {
  padding: 20px 10px 20px 20px;
  height: 1200rpx;
  box-sizing: border-box;
  overflow-y: auto;

  .cart-item {
    margin-bottom: 20rpx;

    .nut-card__right__price__origin {
      display: none;
    }

    .nut-price {
      color: #F25C26;
      font-weight: bold;
    }
  }
}

.cart-foot {
  position: fixed;
  // bottom: calc(var(--nut-tabbar-height, 100rpx) + env(safe-area-inset-bottom));
  bottom: env(safe-area-inset-bottom);
  left: 0;
  border-top: 1px solid #EEEEEE;
  padding: 30px 10px;
  box-sizing: border-box;
  width: 100%;
  z-index: 99;
  background: #fff;

  .nut-button {
    width: 200px;
  }
}

.search_prolist_attr {
  margin: 3px 0 1px;
  height: 15px;
  overflow: hidden;

  >span {
    float: left;
    padding: 0 5px;
    border-radius: 1px;
    font-size: 14px;
    height: 15px;
    line-height: 15px;
    color: #999;
    background-color: #f2f2f7;
    margin-right: 5px;
  }
}
</style>